<template>
    <div>
        <!-- 表头分页查询条件， shadow="never" 指定 card 卡片组件没有阴影 -->
        <el-card shadow="never" class="mb-5">
            <!-- flex 布局，内容垂直居中 -->
            <div class="flex items-center">
                <el-text>用户名</el-text>
                <div class="ml-3 w-52 mr-5">
                    <el-input v-model="searchUsername" placeholder="请输入用户名（模糊查询）" clearable />
                </div>
                <el-text>UID</el-text>
                <div class="ml-3 w-52 mr-5">
                    <el-input v-model="searchUid" placeholder="请输入UID" clearable />
                </div>

                <el-text>注册时间</el-text>
                <div class="ml-3 w-30 mr-5">
                    <!-- 日期选择组件（区间选择） -->
                    <el-date-picker v-model="pickDate" type="daterange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" size="default" :shortcuts="shortcuts" @change="datepickerChange" />
                </div>

               
            </div>

             <!-- flex 布局，内容垂直居中 -->
             <div class="flex items-center mt-6">
                <el-text>邮箱</el-text>
                <div class="ml-3 w-52 mr-5">
                    <el-input v-model="searchMail" placeholder="请输入邮箱" clearable />
                </div>
                <el-text>手机号</el-text>
                <div class="ml-3 w-52 mr-5">
                    <el-input v-model="searchPhone" placeholder="请输入手机号" clearable />
                </div>
                <el-text>QQ号</el-text>
                <div class="ml-3 w-52 mr-5">
                    <el-input v-model="searchQQId" placeholder="请输入QQ号" clearable />
                </div>
                <el-text>昵称</el-text>
                <div class="ml-3 w-52 mr-5">
                    <el-input v-model="searchNickname" placeholder="请输入昵称" clearable />
                </div>
            </div>

             <!-- flex 布局，内容垂直居中 -->
             <div class="flex items-center mt-6">
                <el-text>状态</el-text>
                <div class="ml-3 w-30 mr-5">
                    <el-select v-model="status" placeholder="请选择账号状态" style="width: 160px">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <el-text>身份</el-text>
                <div class="ml-3 w-30 mr-5">
                    <el-select v-model="searchIdentity" placeholder="请选择用户身份" style="width: 160px">
                        <el-option v-for="item in identifyOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>

                <el-text>用户权限</el-text>
                <div class="ml-3 w-30 mr-5">
                    <el-select v-model="searchPermission" placeholder="请选择账号权限" style="width: 160px">
                        <el-option v-for="item in permissionOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>

                <el-text>用户等级</el-text>
                <div class="ml-3 w-30 mr-5">
                    <el-select v-model="searchLevel" placeholder="请选择账号等级" style="width: 160px">
                        <el-option v-for="item in levelOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <el-button type="primary" class="ml-3" :icon="Search" @click="getTableData">查询</el-button>
                <el-button class="ml-3" :icon="RefreshRight" @click="reset">重置</el-button>
            </div>
        </el-card>

        <el-card shadow="never">
            <!-- 分页列表 -->
            <el-table :data="tableData" border stripe v-loading="tableLoading" table-layout="auto">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="userId" label="UID" width="120" />
                <el-table-column prop="avatar" label="头像" width="60">
                    <template #default="scope">
                        <el-avatar :size="40" :src="scope.row.avatar" />
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="60" />
                <el-table-column prop="nickname" label="昵称" width="160" />
                <el-table-column prop="mail" label="邮箱" />
                <el-table-column prop="isAdmin" label="管理权限" width="100">
                    <template #default="scope">
                        <el-switch disabled v-model="scope.row.isAdmin" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" />
                    </template>
                </el-table-column>
                <el-table-column prop="identity" label="身份" width="80">
                    <template #default="scope">
                        <el-tag type="warning" v-if="scope.row.identity == 2" effect="plain">社区治安</el-tag>
                        <el-tag type="success" v-else-if="scope.row.identity == 4" effect="plain">普通用户</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.identity == 3" effect="plain">高级用户</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.identity == 1" effect="plain">创作博主</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="status" label="账号状态" width="100">
                    <template #default="scope">
                        <el-tag type="warning" v-if="scope.row.status == 1">禁言中</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status == 0">正常</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.status == 2">封禁中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="400">
                    <template #default="scope">

                        <el-tooltip class="box-item" effect="dark" content="详情" placement="bottom">
                            <el-button size="small" :icon="Tickets" type="success" @click="showDetailDialog(scope.row)">
                                查看
                            </el-button>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="dark" content="编辑" placement="bottom">
                            <el-button size="small" :icon="Tickets" type="primary" @click="showEditDialog(scope.row)">
                                编辑
                            </el-button>
                        </el-tooltip>
                        <el-tooltip v-if="scope.row.status >= 1" class="box-item" effect="dark" content="解禁"
                            placement="bottom">
                            <el-button size="small" :icon="CircleCheck" type="info"
                                @click="showEditDetailDialog(scope.row)"> 解禁
                            </el-button>
                        </el-tooltip>

                        <el-tooltip v-else class="box-item" effect="dark" content="封禁" placement="bottom">
                            <el-button size="small" :icon="CircleClose" type="warning"
                                @click="showEditDetailDialog(scope.row)"> 封禁
                            </el-button>
                        </el-tooltip>

                        <!-- <el-tooltip class="box-item" effect="dark" content="删除" placement="bottom">
                            <el-button type="danger" size="small" :icon="Delete"
                                @click="deleteCommentRow(scope.row.id)"> 删除
                            </el-button>
                        </el-tooltip> -->

                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="mt-10 flex justify-center">
                <el-pagination v-model:current-page="current" v-model:page-size="size" :page-sizes="[5,10, 20, 50]"
                    :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="getTableData" />
            </div>

        </el-card>
    </div>

    <!-- 查看用户详情 -->
    <el-dialog v-model="detailDialogVisible"
        :title=" userData && userData.username ? userData.username + '的用户档案' : '用户档案'" width="700"
        class="custom-dialog">
        <el-divider class="dialog-div" border-style="dashed" />
        <div
            class="user-profile-scroll bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-6 border border-indigo-400 rounded dark:bg-indigo-900 dark:text-indigo-300">
            <el-form :model="userData" label-width="auto">
                <el-form-item label="头像">
                    <el-avatar :size="48" :src="userData.avatar" />
                </el-form-item>
                <el-form-item label="UID">
                    <el-tag v-if="userData && userData.userId" type="primary" size="large">{{
                        userData.userId }}</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-tag v-if="userData && userData.username" type="primary" size="large">{{
                        userData.username }}</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-tag v-if="userData && userData.mail" type="primary" size="large">{{
                        userData.mail }}</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-tag v-if="userData && userData.phoneNumber" type="primary" size="large">{{
                        userData.phoneNumber }}</el-tag>
                    <el-tag v-else type="info" size="large">未绑定</el-tag>
                </el-form-item>
                <el-form-item label="QQ号">
                    <el-tag v-if="userData && userData.qqId" type="primary" size="large">{{
                        userData.qqId }}</el-tag>
                    <el-tag v-else type="info" size="large">未绑定</el-tag>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-tag v-if="userData && userData.nickname" type="primary" size="large">{{
                        userData.nickname }}</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
                <el-form-item label="性别">
                    <el-tag v-if="userData && userData.sex == 0" type="primary" size="large" :icon="Female">女生</el-tag>
                    <el-tag v-else-if="userData && userData.sex == 1" type="primary" size="large"
                        :icon="Male">男生</el-tag>
                    <el-tag v-else-if="userData && userData.sex == 2" type="primary" size="large"
                        :icon="Hide">保密</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
                <el-form-item label="个性签名">
                    <el-tag v-if="userData && userData.signature" type="primary" size="large">{{
                        userData.signature }}</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>

                <el-form-item label="自我介绍">
                    <el-tag v-if="userData && userData.introduce" type="primary" size="large">{{
                        userData.introduce }}</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
                <el-form-item label="生日">
                    <el-tag v-if="userData && userData.birthday" type="primary" size="large">{{ userData.birthday
                        }}</el-tag>
                    <el-tag v-else type="danger" size="large">未设置</el-tag>
                </el-form-item>
                <el-form-item label="居住地">
                    <el-tag v-if="userData && userData.localCity" type="primary" size="large">{{ userData.localCity
                        }}</el-tag>
                    <el-tag v-else type="danger" size="large">未设置</el-tag>
                </el-form-item>
                <el-form-item label="毕业学校">
                    <el-tag v-if="userData && userData.university" type="primary" size="large">{{ userData.university
                        }}</el-tag>
                    <el-tag v-else type="danger" size="large">未设置</el-tag>
                </el-form-item>
                <el-form-item label="Github">
                    <el-tag v-if="userData && userData.github" type="primary" size="large">{{ userData.github
                        }}</el-tag>
                    <el-tag v-else type="danger" size="large">未设置</el-tag>
                </el-form-item>
                <el-form-item label="Gitee">
                    <el-tag v-if="userData && userData.gitee" type="primary" size="large">{{ userData.gitee }}</el-tag>
                    <el-tag v-else type="danger" size="large">未设置</el-tag>
                </el-form-item>
                <el-form-item label="个人博客网站">
                    <el-tag v-if="userData && userData.personBlog" type="primary" size="large">{{ userData.personBlog
                        }}</el-tag>
                    <el-tag v-else type="danger" size="large">未设置</el-tag>
                </el-form-item>
                <el-form-item label="管理员权限">
                    <el-tag v-if="userData && userData.isAdmin" type="success" size="large">是</el-tag>
                    <el-tag v-else type="danger" size="large">否</el-tag>
                </el-form-item>
                <el-form-item label="用户身份">
                    <el-tag type="warning" v-if="userData && userData.identity == 2" effect="plain"
                        size="large">社区治安</el-tag>
                    <el-tag type="success" v-else-if="userData && userData.identity == 4" effect="plain"
                        size="large">普通用户</el-tag>
                    <el-tag type="danger" v-else-if="userData && userData.identity == 3" effect="plain"
                        size="large">高级用户</el-tag>
                    <el-tag type="primary" v-else-if="userData && userData.identity == 1" effect="plain"
                        size="large">创作博主</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
                <el-form-item label="账号状态">
                    <el-tag type="warning" v-if="userData && userData.status == 1" size="large">禁言中</el-tag>
                    <el-tag type="success" v-else-if="userData && userData.status == 0" size="large">正常</el-tag>
                    <el-tag type="danger" v-else-if="userData && userData.status == 2" size="large">封禁中</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
                <el-form-item v-if="userData && userData.status >= 1" label="账号异常原因">
                    <el-tag v-if="userData && userData.reason " type="warning" size="large">{{ userData.reason
                        }}</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
                <el-form-item label="用户等级">
                    <el-tag v-if="userData && userData.level" type="primary" size="large"> Lv.{{ userData.level
                        }}</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
                <el-form-item label="用户称号">
                    <el-tag v-if="userData && userData.appellation" type="primary" size="large"> {{ userData.appellation
                        }}</el-tag>
                    <el-tag v-else type="info" size="large">无</el-tag>
                </el-form-item>
                <el-form-item label="注册时间">
                    <el-tag v-if="userData && userData.createTime" type="primary" size="large"> {{ userData.createTime
                        }}</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
                <el-form-item label="最近更新">
                    <el-tag v-if="userData && userData.updateTime" type="primary" size="large"> {{ userData.updateTime
                        }}</el-tag>
                    <el-tag v-else type="danger" size="large">获取失败</el-tag>
                </el-form-item>
            </el-form>
        </div>
        <el-divider class="dialog-div" border-style="dashed" />
        <template #footer>
            <div class="dialog-footer">
                <el-button class="exit-button" @click="detailDialogVisible = false">退出</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 编辑用户信息 -->
    <el-dialog v-model="editDialogVisible" title="用户信息编辑" width="700" class="edit-dialog">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">用户资料</el-menu-item>
            <el-menu-item index="2">账号资料</el-menu-item>
            <el-menu-item index="3">注销/复原</el-menu-item>
            <el-menu-item index="4">其他</el-menu-item>
        </el-menu>
        <div class="h-2" />
        <div v-if="activeIndex == 1" class="user-profile-scroll">
            <div class="p-4 md:p-4">
                <!-- 引入 Element Plus 表单组件，移动端设置宽度为 5/6，PC 端设置为 2/5 -->
                <el-form class="space-y-4" ref="messageFormRef" :rules="personRules" :model="personForm"
                    label-width="auto">
                    <el-form-item prop="avatar" label="头像">
                        <el-upload class="avatar-uploader"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                            :show-file-list="false" :on-change="handleUserAvatarImg">
                            <el-avatar v-if="personForm.avatar" :size="100" :src="personForm.avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Avatar />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item prop="userId" label="用户ID">
                        <el-input size="large" v-model="personForm.userId" placeholder="用户ID不可修改" :prefix-icon="Key"
                            clearable disabled />
                    </el-form-item>
                    <el-form-item prop="username" label="用户名">
                        <el-input size="large" v-model="personForm.username" placeholder="用户名不可修改" :prefix-icon="Key"
                            clearable disabled />
                    </el-form-item>
                    <el-form-item prop="nickname" label="昵称">
                        <el-input size="large" v-model="personForm.nickname" placeholder="请输入昵称" :prefix-icon="Sugar"
                            clearable />
                    </el-form-item>
                    <el-form-item prop="signature" label="个性签名">
                        <el-input size="large" v-model="personForm.signature" placeholder="请介绍一下自己"
                            :prefix-icon="EditPen" clearable />
                    </el-form-item>

                    <el-form-item prop="university" label="毕业院校">
                        <el-input size="large" v-model="personForm.university" placeholder="请输入自己的毕业/在读院校"
                            :prefix-icon="School" disabled clearable />
                        <!-- 省份选择 -->
                        <el-select v-model="selectedProvince" placeholder="先选择省份" @change="handleSchoolCityChange()"
                            style="width: 400px; margin-right: 10px ;margin-bottom: 10px; margin-top: 10px;">
                            <el-option v-for="provinceSchools in schoolList" :key="provinceSchools.province"
                                :label="provinceSchools.province" :value="provinceSchools.province" />
                        </el-select>
                        <!-- {{ selectedProvinceSchools }} -->
                        <el-autocomplete v-model="selectedSchool" :fetch-suggestions="schoolQuerySearch"
                            :disabled="!selectedProvince" placeholder="输入学校名称，如：北京大学" clearable
                            @select="handleSchoolSelect" style="width: 400px">
                            <!-- 自定义显示模板 -->
                            <template #default="{ item }">
                                <div class="school-item">
                                    <span class="name">{{ item.name }}</span>
                                    <!-- <span class="info"> --- {{ item.city }} · {{ item.type }} · {{ item.level }}</span> -->
                                </div>
                            </template>
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item prop="github" label="Github链接">
                        <el-input size="large" v-model="personForm.github" placeholder="请输入自己的Github链接"
                            :prefix-icon="Link" clearable />
                    </el-form-item>
                    <el-form-item prop="gitee" label="Gitee链接">
                        <el-input size="large" v-model="personForm.gitee" placeholder="请输入自己的Gitee链接"
                            :prefix-icon="Link" clearable />
                    </el-form-item>
                    <el-form-item prop="personBlog" label="个人博客">
                        <el-input size="large" v-model="personForm.personBlog" placeholder="请输入自己的个人博客链接"
                            :prefix-icon="Collection" clearable />
                    </el-form-item>
                    <el-form-item prop="introduce" label="个人介绍">
                        <el-input v-model="personForm.introduce" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                            placeholder="大胆地介绍自己" clearable />
                    </el-form-item>
                    <el-form-item prop="localCity" label="所在城市">
                        <!-- <el-input size="large" v-model="personForm.localCity" placeholder="请输入自己所在城市"
                            :prefix-icon="Location" clearable /> -->
                        <el-cascader v-model="personForm.localCityCode" :options="areaOptions" :props="cascaderProps"
                            @change="handleCityChange" placeholder="请选择省市区" clearable />
                        <!-- {{ personForm.localCity }}
                            {{ personForm.localCityCode }} -->
                    </el-form-item>
                    <el-form-item prop="level" label="用户等级">
                        <el-input-number v-model="personForm.level" :min="1" :max="9" @change="handleLevelChange" />
                    </el-form-item>
                    <el-form-item prop="sex" label="性别">
                        <el-radio-group v-model="personForm.sex" class="pl-3">
                            <el-radio value="0">女生</el-radio>
                            <el-radio value="1">男生</el-radio>
                            <el-radio value="2">保密</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item prop="birthday" label="生日">
                        <div class="inline pl-3">
                            <el-date-picker v-model="personForm.birthday" type="date" placeholder="生日"
                                value-format="YYYY-MM-DD" :disabled-date="disabledDate" :shortcuts="shortcuts"
                                :size="size" />
                        </div>
                    </el-form-item>
                    <el-form-item prop="appellation" label="称号">
                        <el-input size="large" v-model="personForm.appellation" placeholder="请输入称号" :prefix-icon="Sugar"
                            clearable />
                    </el-form-item>
                    <el-form-item label="用户注册时间" prop="registerTime">
                        <span
                            class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">{{
                            userEditData.createTime }}</span>
                    </el-form-item>
                    <el-form-item label="资料最近更新于" prop="updateTime">
                        <span
                            class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">{{
                            userEditData.updateTime }}</span>
                    </el-form-item>
                    <div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
                        role="alert">
                        <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
                        </svg>
                        <span class="font-semibold">温馨提示：</span> 如果需要修改邮箱，QQ号码，手机号码等信息请到【账号资料】页面进行修改，用户名不可修改。
                    </div>
                    <div class="flex items-center justify-center">
                        <el-button class="mt-2 dark:text-gray-100" size="large" type="primary" :loading="loading"
                            @click="onSaveUserMessages">保存个人信息</el-button>
                    </div>
                </el-form>
            </div>
        </div>

        <div v-else-if="activeIndex == 2" class="user-profile-scroll">
            <div class="p-4 md:p-4">
                <!-- 引入 Element Plus 表单组件，移动端设置宽度为 5/6，PC 端设置为 2/5 -->
                <el-form class="space-y-4" ref="accountFormRef" :rules="accountRules" :model="accountForm"
                    label-width="auto">
                    <el-form-item prop="userId" label="用户ID">
                        <el-input size="large" v-model="accountForm.userId" placeholder="用户ID不可修改" :prefix-icon="Key"
                            clearable disabled />
                    </el-form-item>
                    <el-form-item prop="username" label="用户名">
                        <el-input size="large" v-model="accountForm.username" placeholder="用户名不可修改" :prefix-icon="Key"
                            clearable disabled />
                    </el-form-item>
                    <el-form-item label="邮箱" prop="mail" label-width="120px">
                        <el-input size="large" v-model="accountForm.mail" placeholder="请输入需要绑定的邮箱" :prefix-icon="Key"
                            clearable />
                    </el-form-item>
                    <el-form-item label="手机号" prop="phoneNumber" label-width="120px">
                        <el-input size="large" v-model="accountForm.phoneNumber" placeholder="请输入需要绑定的手机号"
                            :prefix-icon="Key" clearable />
                    </el-form-item>
                    <el-form-item label="QQ" prop="qqId" label-width="120px">
                        <el-input size="large" v-model="accountForm.qqId" placeholder="请输入需要绑定的QQ号" :prefix-icon="Key"
                            clearable />
                    </el-form-item>
                    <el-form-item label="新密码" prop="password" label-width="120px">
                        <el-input size="large" type="password" v-model="accountForm.password" placeholder="请输入新密码"
                            clearable show-password />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPassword" label-width="120px">
                        <el-input size="large" type="password" v-model="accountForm.confirmPassword"
                            placeholder="请确认新密码" clearable show-password />
                    </el-form-item>

                    <el-form-item label="用户注册时间" prop="registerTime">
                        <span
                            class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">{{
                            userEditData.createTime }}</span>
                    </el-form-item>
                    <el-form-item label="资料最近更新于" prop="updateTime">
                        <span
                            class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">{{
                            userEditData.updateTime }}</span>
                    </el-form-item>
                    <div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
                        role="alert">
                        <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
                        </svg>
                        <span class="font-semibold">温馨提示：</span> 如果需要修改昵称，签名，介绍等个人资料信息请到【用户资料】页面进行修改，用户名不可修改。
                    </div>
                    <div class="flex items-center justify-center">
                        <el-button class="mt-2 dark:text-gray-100" size="large" type="primary" :loading="loading"
                            @click="onSaveUserAccount">更新账号资料</el-button>
                    </div>
                </el-form>
            </div>
        </div>
        <div v-else-if="activeIndex == 3" class="user-profile-scroll">
            <div class="p-4 md:p-4">
                <div class="flex flex-col items-center justify-center mb-4">
                    <div
                        class="max-w-lg p-6 mb-8 bg-white border w-full border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <h5 class="mb-4 text-2xl font-bold tracking-tight text-gray-700 dark:text-white">操作账号：{{
                                personForm.username }}</h5>
                        </a>
                        <p class="mb-3 font-normal text-gray-600 dark:text-gray-400">UID：{{ accountForm.userId }}</p>
                        <p class="mb-3 font-normal text-gray-600 dark:text-gray-400">用户名：{{ accountForm.username }}</p>
                        <p class="mb-3 font-normal text-gray-600 dark:text-gray-400">昵称：{{ personForm.nickname }}</p>
                        <p class="mb-3 font-normal text-gray-600 dark:text-gray-400">邮箱：{{ accountForm.mail }}</p>

                        <p v-if="accountForm.phoneNumber != null && accountForm.phoneNumber != ''"
                            class="mb-3 font-normal text-gray-600 dark:text-gray-400">手机号：{{ accountForm.phoneNumber }}
                        </p>
                        <p v-else class="mb-3 font-normal text-gray-600 dark:text-gray-400">手机号：未绑定</p>

                        <p v-if="accountForm.qqId != null && accountForm.qqId != ''"
                            class="mb-3 font-normal text-gray-600 dark:text-gray-400">QQ号：{{ accountForm.qqId }}</p>
                        <p v-else class="mb-3 font-normal text-gray-600 dark:text-gray-400">QQ号：未绑定</p>

                        <div v-if="!accountForm.isCancel" class="flex items-center justify-center">
                            <el-button class="mt-2 dark:text-gray-100" size="large" type="danger" :loading="loading"
                                @click="cancelAccountHandler">注销账号</el-button>
                        </div>

                        <div v-else class="flex items-center justify-center">
                            <el-button class="mt-2 dark:text-gray-100" size="large" type="success" :loading="loading"
                                @click="recoveryAccountHandler">复原账号</el-button>
                        </div>
                    </div>
                </div>



                <div class="p-4 mb-4 text-sm bg-red-100 text-red-800 rounded-lg dark:bg-red-900 dark:text-red-300"
                    role="alert">
                    <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
                    </svg>
                    <span class="font-semibold">温馨提示：</span> 你正在进行账号注销与复原操作，请谨慎操作。
                </div>

            </div>
        </div>
        <div v-else class="user-profile-scroll"> 表单获取失败 </div>
    </el-dialog>

    <!-- 账号状态 -->
    <FormDialog ref="editDialogRef" title="账号状态设置" destroyOnClose @submit="onSubmit">
        <el-form ref="userStatusFormRef" :rules="accountStatusRules" :model="userStatusForm" label-width="auto">
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="userStatusForm.status">
                    <el-radio value="0">正常</el-radio>
                    <el-radio value="1">禁言</el-radio>
                    <el-radio value="2">封禁</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="block" v-if="userStatusForm.status != 0">
                <span class="demonstration">禁言/封禁时间</span>
                <el-date-picker v-model="rangeDateTime" type="datetimerange" :shortcuts="rangeShortcuts" range-separator="至"
                    start-placeholder="开始时间" end-placeholder="结束时间" @change="dateTimePickerChange" />
            </div>
            <el-form-item label="原因" prop="reason" v-if="userStatusForm.status != 0">
                <el-input type="textarea" placeholder="请填写审核不通过的原因" v-model="userStatusForm.reason" :rows="6" />
            </el-form-item>
        </el-form>
    </FormDialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { deleteComment, examineComment, getCommentPageList } from '@/api/admin/comment'
import { Search, RefreshRight, Delete, Edit, Tickets, CircleCheck, CircleClose, Female, Male, Hide, Check, Close } from '@element-plus/icons-vue'
import moment from 'moment'
import { showMessage, showModel } from '@/composables/utils';
import FormDialog from '@/components/FormDialog.vue'
import { getUserPageList, updateUserAccount, updateUserMessages, updateUserStatus, userLogout, userRestore } from '@/api/admin/user-manager';
import schools from '@/assets/ChinaUniversityList.json';
import { regionData } from 'element-china-area-data';
import { uploadFile } from '@/api/admin/file';
import { format } from 'date-fns';
import { identity } from '@vueuse/core';

// 是否选择省份
const isSelectProvince = ref(false)
const schoolList = ref(schools)
// 所选择省份
const selectedProvince = ref('')
// 所选择省份的学校列表
const selectedProvinceSchools = ref([])
// 所选择学校
const selectedSchool = ref('')
// 选择省份改变，更新学校库
const handleSchoolCityChange = () => {
    let ps = schoolList.value.filter(school => school.province === selectedProvince.value)[0];
    selectedProvinceSchools.value = ps.schools;
    isSelectProvince.value = true;
    // selectedProvinceSchools.value = value;
}

// 学校搜索
const schoolQuerySearch = (queryString, cb) => {
    const results = queryString ? selectedProvinceSchools.value.filter(schoolFilter(queryString)) : selectedProvinceSchools.name;
    cb(results);
};

// 学校过滤器
const schoolFilter = (queryString) => {
    return (school) => {
        return school.name.toLowerCase().indexOf(queryString.toLowerCase())=== 0;
    }
};

// 学校选择
const handleSchoolSelect = (item) => {
    console.log(item);
    personForm.university = item.name;
    selectedSchool.value = item.name
}
const selectedArea = ref([]); // 绑定选中的省市区编码数组
// 配置选项显示规则
const cascaderProps = {
  value: 'value',    // 选项值字段
  label: 'label',    // 选项显示字段
  children: 'children' // 子级字段
};

// 使用 Element 内置的中国省市区数据
const areaOptions = regionData;

// 模糊搜索的用户名
const searchUsername = ref('')
// uid
const searchUid = ref('')
// 身份
const searchIdentity = ref(-1)
// 权限
const searchPermission = ref(-1)
// 等级
const searchLevel = ref(-1)
// 昵称
const searchNickname = ref('')
// 邮箱
const searchMail = ref('')
// 手机号
const searchPhone = ref('')
// QQ
const searchQQId = ref('')
// 日期
const pickDate = ref('')

// 查询条件：开始结束时间
const startDate = reactive({})
const endDate = reactive({})

// 监听日期组件改变事件，并将开始结束时间设置到变量中
const datepickerChange = (e) => {
    startDate.value = moment(e[0]).format('YYYY-MM-DD')
    endDate.value = moment(e[1]).format('YYYY-MM-DD')

    console.log('开始时间：' + startDate.value + ', 结束时间：' + endDate.value)
}

const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]

// 评论详情对话框是否展示
const detailDialogVisible = ref(false)
const editDialogVisible = ref(false)
// 用户数据
const userData = ref({})
// 修改数据
const userEditData = ref({})

// 当前选择状态
const status = ref(-1)
// 账号状态 select
const statusOptions = [
    {
        value: -1,
        label: '全部',
    },
    {
        value: 0,
        label: '正常',
    },
    {
        value: 1,
        label: '禁言',
    },
    {
        value: 2,
        label: '封禁',
    },
    
]

const permissionOptions = [
    {
        value: -1,
        label: '全部',
    },
    {
        value: 0,
        label: '普通用户',
    },
    {
        value: 1,
        label: '管理员',
    },
]

const identifyOptions = [
    {
        value: -1,
        label: '全部',
    },
    {
        value: 4,
        label: '普通用户',
    },
    {
        value: 1,
        label: '创作博主', 
    },
    {
        value: 2,
        label: '社区治安', 
    },
    {
        value: 3,
        label: '高级用户', 
    }
]

const levelOptions = [
    {
        value: -1,
        label: '全部',
    }, 
    {
        value: 1,
        label: 'Lv.1', 
    },
    {
        value: 2,
        label: 'Lv.2', 
    },
    {
        value: 3,
        label: 'Lv.3',
    },
    {
        value: 4,
        label: 'Lv.4',
    },
    {
        value: 5,
        label: 'Lv.5',
    },
    {
        value: 6,
        label: 'Lv.6',
    },
    {
        value: 7,
        label: 'Lv.7',
    },
    {
        value: 8,
        label: 'Lv.8',
    },
    {
        value: 9,
        label: 'Lv.9', 
    }
]

// 重置
const reset = () => {
    pickDate.value = ''
    startDate.value = null
    endDate.value = null
    searchUsername.value = ''
    searchUid.value = ''
    searchIdentity.value = -1
    searchPermission.value = -1
    status.value = -1
    searchLevel.value = -1
    searchNickname.value = ''
    searchMail.value = ''
    searchPhone.value = ''
    searchQQId.value = ''
}

// 表格加载 Loading
const tableLoading = ref(false)
// 表格数据
const tableData = ref([])
// 当前页码，给了一个默认值 1
const current = ref(1)
// 总数据量，给了个默认值 0
const total = ref(0)
// 每页显示的数据量，给了个默认值 10
const size = ref(10)

// 获取分页数据
function getTableData() {
    // 显示表格 loading
    tableLoading.value = true
    // 调用后台分页接口，并传入所需参数
    let params = {
        "current": current.value,
        "endDate": endDate.value,
        "identity": searchIdentity.value == null || searchIdentity.value == -1 ? null : searchIdentity.value,
        "isAdmin": searchPermission.value == null || searchPermission.value == -1 ? null : searchPermission.value,
        "level": searchLevel.value == null || searchLevel.value == -1 ? null : searchLevel.value,
        "mail": searchMail.value == null || searchMail.value == '' ? null : searchMail.value,
        "nickname": searchNickname.value == null || searchNickname.value == '' ? null : searchNickname.value,
        "phoneNumber": searchPhone.value == null || searchPhone.value == '' ? null : searchPhone.value,
        "qqId": searchQQId.value == null || searchQQId.value == ''? null : searchQQId.value,
        "size": size.value,
        "startDate": startDate.value,
        "userId": searchUid.value == null || searchUid.value == '' ? null : searchUid.value,
        "status": status.value == null || status.value == -1? null : status.value,
        "username": searchUsername.value == null || searchUsername.value == ''? null : searchUsername.value,
    }
    getUserPageList(params)
        .then((res) => {
            if (res.success == true) {
                tableData.value = res.data
                current.value = res.pageSize
                size.value = res.size
                total.value = res.total
            }
        })
        .finally(() => tableLoading.value = false) // 隐藏表格 loading
}
getTableData()

// 每页展示数量变更事件
const handleSizeChange = (chooseSize) => {
    console.log('选择的页码' + chooseSize)
    size.value = chooseSize
    getTableData()
}

// 删除评论
const deleteCommentRow = (id) => {
    // 弹出确认弹窗
    showModel("确认删除该评论及其子评论吗？", "warning", "评论删除确认", true).then(() => {
        // 发送删除请求
        deleteComment({id: id}).then((res) => {
            if (res.success == true) {
                showMessage("删除评论成功！", "success")
                // 重新获取表格数据
                getTableData()
            } else {
                showMessage(res.message, "error")
            }
        })
    }).catch(() => {
        // 取消删除
        showMessage("取消删除评论！", "info")
    })
}

// 展示用户数据详情对话框
const showDetailDialog = (row) => {
    detailDialogVisible.value = true
    userData.value = row
}

// 表单引用
const formRef = ref(null)
const messageFormRef = ref(null)
const accountFormRef = ref(null)
const userStatusFormRef = ref(null)


// 规则校验
const accountStatusRules = {
    status: [
        {
            required: true,
            message: '状态不能为空',
            trigger: 'blur',
        },
    ],
    reason: [
        {
            required: true,
            message: '原因不能为空',
            trigger: 'blur',
        },
    ]
}

const rangeDateTime = ref([])

// 监听日期组件改变事件，并将开始结束时间设置到变量中
const dateTimePickerChange = (e) => {
    rangeDateTime.value = e;
    console.log('开始时间：' + rangeDateTime.value[0] + ', 结束时间：' + rangeDateTime.value[1]) 
}

const rangeShortcuts = [
  {
    text: '1小时后',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setTime(end.getTime() + 3600 * 1000)
      return [start, end]
    },
  },
  {
    text: '3小时后',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setTime(end.getTime() + 3600 * 1000 * 3)
      return [start, end]
    },
  },
  {
    text: '12小时后',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setTime(end.getTime() + 3600 * 1000 * 12)
      return [start, end]
    },
  },
  {
    text: '24小时后',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setTime(end.getTime() + 3600 * 1000 * 24)
      return [start, end]
    },
  },
  {
    text: '3天后',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setDate(end.getDate() + 3)
      return [start, end]
    },
  },
  {
    text: '一周后',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setDate(end.getDate() + 7)
      return [start, end]
    },
  },
  {
    text: '一月后',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setMonth(end.getMonth() + 1)
      return [start, end]
    },
  },
  {
    text: '三月后',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setMonth(end.getMonth() + 3)
      return [start, end]
    },
  },
  {
    text: '一年后',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setFullYear(end.getFullYear() + 1)
      return [start, end]
    },
  },
  {
    text: '十年后',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setFullYear(end.getFullYear() + 10)
      return [start, end]
    },
  },
  {
    text: '半永久(20年)',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setFullYear(end.getFullYear() + 20)
      return [start, end]
    },
  },
  {
    text: '永久(100年)',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setFullYear(end.getFullYear() + 100)
      return [start, end]
    },
  },
]

// 账号状态修改对话框引用
const editDialogRef = ref(null)
// 用户状态表单
const userStatusForm = reactive({
    "userId": "",
    "status": 0,
    "reason": "",
    "startTime": "",
    "endTime": ""
})
// 展示账号状态修改
const showEditDetailDialog = (row) => {
    userStatusForm.userId = row.userId
    userStatusForm.status = row.status + ""
    userStatusForm.reason = row.reason
    userStatusForm.startTime = row.startTime
    userStatusForm.endTime = row.endTime

    // 初始化时间选择器
    let startTime = row.startTime ? new Date(row.startTime) : null;
    let endTime = row.endTime ? new Date(row.endTime) : null;
    rangeDateTime.value = [startTime, endTime];
    console.log(userStatusForm)
    editDialogRef.value.open()
}

// 提交审核表单
const onSubmit = () => {
    // 先验证 form 表单字段
    userStatusFormRef.value.validate((valid) => {
        if (!valid) {
            console.log('表单验证不通过')
            return false
        }
        
        // 显示提交按钮 loading
        editDialogRef.value.showBtnLoading()
        // 格式化范围日期时间
        if (rangeDateTime.value == null || rangeDateTime.value.length < 2 || rangeDateTime.value[0] == null || rangeDateTime.value[1] == null) {
            let endTime = new Date()
            let startTime = new Date()
            endTime.setTime(endTime.getTime() + 3600 * 1000 * 3)
            rangeDateTime.value = [startTime, endTime]
        }
        console.log(rangeDateTime.value)
        userStatusForm.startTime = moment(rangeDateTime.value[0]).format('YYYY-MM-DD HH:mm:ss')
        userStatusForm.endTime = moment(rangeDateTime.value[1]).format('YYYY-MM-DD HH:mm:ss')
        console.log(userStatusForm)
        
        updateUserStatus(userStatusForm).then((res) => {
            if (!res.success) {
                // 获取服务端返回的错误消息
                let message = res.message
                // 提示错误消息
                showMessage(message, 'error')
                return
            }

            showMessage('提交成功', 'success')
            // 将表单内容重置
            userStatusForm.id = null
            userStatusForm.status = '2'
            userStatusForm.reason = ''
            // 隐藏对话框
            editDialogRef.value.close()
            // 重新请求分页接口，渲染数据
            getTableData()
        }).finally(() => editDialogRef.value.closeBtnLoading()) // 隐藏提交按钮 loading

    })
}

// 编辑对话框菜单栏选择下标
const activeIndex = ref('1')
// 用户资料修改表单
const personForm = reactive({
    "appellation": "",
    "avatar": "",
    "birthday": "",
    "gitee": "",
    "github": "",
    "introduce": "",
    "level": 0,
    "localCity": "",
    "localCityCode": [],
    "nickname": "",
    "personBlog": "",
    "sex": "0",
    "signature": "",
    "university": "",
    "userId": 0
})
// 用户账号资料表单
const accountForm = reactive({
    "mail": "",
    "password": "",
    "confirmPassword": "",
    "phoneNumber": "",
    "qqId": "",
    "userId": "",
    "username": "",
    "isCancel": false
})



//表单验证规则
const personRules = {
    username: [
        {
            required: true,
            message: "用户账号不能为空！",
            trigger: "blur"
        }
    ],
    userId: [
        {
            required: true,
            message: "用户ID不能为空！",
            trigger: "blur"
        }
    ],
    password: [
        {
            required: true,
            message: "密码不能为空！",
            trigger: "blur"
        }
    ],
    confirmPassword: [
        {
            required: true,
            message: "确认密码不能为空！",
            trigger: "blur"
        }
    ],
    mail: [
        {
            required: true,
            message: "邮箱不能为空！",
            trigger: "blur"
        }
    ],
    nickname: [
        {
            required: true,
            min: 1,
            max: 16,
            message: "昵称字数在1-16个字符之间！",
            trigger: "blur"
        }
    ],
    signature: [
        {
            required: false,
            max: 64,
            message: "个性签名字数不能超过64个字符！",
            trigger: "blur"
        } 
    ],
    appellation: [
        {
            required: false,
            max: 6,
            message: "称号字数不超过6个字符！",
            trigger: "blur"
        }
    ],
    introduce: [
        {
            required: false,
            max: 128,
            message: "个人介绍字数不得超过128个字符！",
            trigger: "blur"
        } 
    ]
}


// 用户账号资料修改规则
const accountRules = {
    username: [
        {
            required: true,
            message: "用户账号不能为空！",
            trigger: "blur"
        }
    ], 
    userId: [
        {
            required: true,
            message: "用户ID不能为空！",
            trigger: "blur"
        } 
    ],
    mail: [
        {
            required: false,
            message: "邮箱格式不正确！",
            trigger: "blur"
        } 
    ]
}

// 展示用户编辑对话框
const showEditDialog = (row) => {
    editDialogVisible.value = true
    userEditData.value = row 
    fillFormData()
    fillAccountFormData()
}

// 将编辑数据填充到修改表单中
const fillFormData = () => {
    // 填充表单数据
    personForm.userId = userEditData.value.userId
    personForm.nickname = userEditData.value.nickname
    personForm.signature = userEditData.value.signature
    personForm.appellation = userEditData.value.appellation
    personForm.level = userEditData.value.level
    personForm.avatar = userEditData.value.avatar
    personForm.localCity = userEditData.value.localCity
    personForm.university = userEditData.value.university
    personForm.github = userEditData.value.github
    personForm.gitee = userEditData.value.gitee
    personForm.personBlog = userEditData.value.personBlog
    personForm.introduce = userEditData.value.introduce
    personForm.sex = userEditData.value.sex + ""
    personForm.birthday = userEditData.value.birthday
    personForm.username = userEditData.value.username
    // 将城市名转换为编码数组
    personForm.localCityCode = decodeArea(personForm.localCity)
    // 将选择学校更新
    selectedSchool.value = personForm.university
}

// 将编辑数据填充到账号修改表单中
const fillAccountFormData = () => {
    // 填充表单数据
    accountForm.userId = userEditData.value.userId
    accountForm.username = userEditData.value.username  
    accountForm.mail = userEditData.value.mail
    accountForm.qqId = userEditData.value.qqId
    accountForm.phoneNumber = userEditData.value.phoneNumber
    accountForm.isCancel = userEditData.value.isCancel
}

// 菜单选择
const handleSelect = (index) => {
    activeIndex.value = index
}

// 等级变化
const handleLevelChange = (value) => {
    personForm.level = value
}

// 城市选择变化
const handleCityChange = (value) => {
    personForm.localCity = encodeArea(value)  
}
// 将城市编码数组转换为字符串
const encodeArea = (codes) => {
    if (codes == null || codes.length == 0) {
        return ""
    }

    // 获取城市数据库
    let cityData = areaOptions
    // 遍历编码数组，获取对应的城市名称
    let names = []
    for (const code of codes) {
        const nodeCity = cityData.find(node => node.value === code)

        if (nodeCity) {
            names.push(nodeCity.label)
            // 更新为子城市数据
            cityData = nodeCity.children || []
        } else {
            // 找不到对应的城市，返回空字符串
            names.push("")
            break
        }
    }
    // 将城市名称数组转换为字符串
    return names.join("-")
}

// 将城市逆向为编码数组
const decodeArea = (name) => {
    if (name == null || name == "") {
        return []
    }

    // 获取城市数据库
    let cityData = areaOptions
    // 将城市名称字符串转换为数组
    let names = name.split("-")
    // 遍历城市名称数组，获取对应的城市编码
    let codes = []  
    for (const name of names) {
        const nodeCity = cityData.find(node => node.label === name)

        if (nodeCity) {
            codes.push(nodeCity.value)
            // 更新为子城市数据
            cityData = nodeCity.children || []  
        }  else {
            // 找不到对应的城市，返回空数组
            break 
        }
    }

    return codes;
}

const handleUserAvatarImg = (file) => {
    // 上传头像
    uploadAvatar(file)
}

// 上传用户头像
const uploadAvatar = (file) => {
    // 构建表单
    let formData = new FormData()
    formData.append("file", file.raw)
    // 发送请求
    uploadFile(formData).then((res) => {
        if (res.success == true) {
            // 上传成功，获取文件路径
            let url = res.data.url
            // 赋值给头像字段
            personForm.avatar = url
            showMessage('上传成功！', 'success')
        } else {
            showMessage(res.message, 'error')
        }
    }).catch((error) => {
        showMessage('上传失败或超时！', 'error') 
    })
}

// 提交修改用户资料信息表单
const onSaveUserMessages = () => {
    // 先验证表单字段
    messageFormRef.value.validate((valid) => {
        if (!valid) {
            console.log('表单验证不通过')
            return false
        } 

        // 发送修改请求
        updateUserMessages(personForm).then((res) => {
            if (res.success == true) {
                showMessage('资料修改成功！', 'success')

                // 重新获取用户数据
                getTableData()
            } else {
                showMessage(res.message, 'error')
            }
        })
    })

   
}

// 提交修改账号信息表单
const onSaveUserAccount = () => {
    // 先验证表单字段
    accountFormRef.value.validate((valid) => {
        if (!valid) {
            console.log('表单验证不通过')
            showMessage('表单信息有误！','error')
            return false
        }

        // 验证密码与确认密码
        if (accountForm.password != accountForm.confirmPassword) {
            showMessage('密码与确认密码不一致！','error')
            return false 
        }

        // 确认弹框
        showModel('确认修改账号信息吗？', 'warning', '修改账号信息', true).then(() => {
            // 发送修改请求
            updateUserAccount(accountForm).then((res) => {
                if (res.success == true) {
                    showMessage('账号信息修改成功！', 'success')

                    // 重新获取用户数据
                    getTableData()
                } else {
                    showMessage(res.message, 'error')
                }
            })
        }).catch((error) => {
            showMessage('取消修改账号信息！', 'info')
        })
    })

}

// 注销
const cancelAccountHandler = () => {
    // 确认弹框
    showModel('确认注销账号吗？', 'warning', '注销账号', true).then(() => {
      // 构造请体
      let data = {
          userId: userEditData.value.userId
      }
      // 发送请求
      userLogout(data).then((res) => {
          if (res.success == true) {
              showMessage('账号注销成功！', 'success')

              // 重新获取用户数据
              getTableData()
              // 更新当前用户注销状态
              accountForm.isCancel = !accountForm.isCancel
          } else {
              showMessage(res.message, 'error') 
          }

    }) 
    }).catch((error) => {
        showMessage('取消注销账号！', 'info')  
    })
}

// 恢复
const recoveryAccountHandler = () => {
    // 确认弹框
    showModel('确认恢复账号吗？', 'warning', '恢复账号', true).then(() => {
        // 构造请体
        let data = {
            userId: userEditData.value.userId
        }
        // 发送请求
        userRestore(data).then((res) => {
            if (res.success == true) {
                showMessage('账号恢复成功！', 'success')
                // 重新获取用户数据
                getTableData()
                // 更新当前用户注销状态
                accountForm.isCancel =!accountForm.isCancel
            } else {
                showMessage(res.message, 'error')
            }
        })
    }).catch((error) => {
        showMessage('取消恢复账号！', 'info')
    })
}

</script>
<style scoped>
/* 限制滚动容器高度（根据需求调整） */
.user-profile-scroll {
  max-height: 60vh;       /* 视窗高度的60% */
  overflow-y: auto;       /* 垂直滚动 */
  padding: 30px 10px;       /* 左右留白 */
}

/* 美化滚动条（可选） */
.user-profile-scroll::-webkit-scrollbar {
  width: 6px;
}
.user-profile-scroll::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

/* 信息项样式 */
.user-info-item {
  margin-bottom: 12px;
  color: #606266;
}

.block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.block:last-child {
  border-right: none;
}
.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>

<style>
.custom-dialog {
    background: #e5edff!important;
    --el-dialog-bg-color: #e5edff!important;
    padding: 24px !important;
}

.custom-dialog .el-dialog__title {
    font-weight: bold;
}

.custom-dialog .exit-button {
    --el-button-bg-color: #e5edff!important;
}

.custom-dialog .el-divider--horizontal{
    margin: 10px 0;
}

.edit-dialog .el-dialog__title {
    font-weight: bold;
}
.edit-dialog {
    padding: 24px !important;
}
</style>